<template>
  <div class="home">
    <h2>博客推荐</h2>
    <div
      class="wrappe"
      ref="wrapper"
      v-for="(item, index) in listData"
      :key="index"
    >
      <div class="wrappe-left" ref="content">
        <van-image :src="item.picUrl" radius="1rem" />
      </div>
      <div class="wrappe-right">
        <div class="wrappe-right-top">
          <span>{{ item.copywriter }}</span>
        </div>
        <div class="wrappe-right-bottom">
          <span class="one">{{ item.category }}</span>
          <span class="two">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { betterScrollHorizontal } from "../../common/betterScroll.js";
export default {
  data() {
    return {
      listData: [],
    };
  },
  created() {
    this.getListData();
  },
  //获取到热门歌手的数据
  methods: {
    //列表获取照片
    getListData() {
      this.$request("get", "/dj/recommend").then((res) => {
        console.log("推荐博客数据", res);
        if (res.code == 200) {
          this.listData = res.djRadios;
        }
        // 异步数据的一些处理,调用封装的横向滚动方法
        betterScrollHorizontal(
          this,
          this.$refs.wrapper,
          this.$refs.content,
          this.listData.length,
          10
        );
      });
    },
  },
};
</script>
<style>
.wrappe {
  width: 100%;
  display: flex;
}
.wrappe-left {
  width: 4rem;
}
.wrappe-right {
  margin: auto 0;
  margin-left: 1rem;
}
.wrappe-right-top {
  width: 16rem;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrappe-right-bottom {
  margin-top: 0.5rem;
  display: flex;
}
.one {
  font-size: 12px;
  width: 4rem;
  padding: 0.05rem;
  border: 1px solid rgb(159, 156, 156);
  border-radius: 35%;
}
.two {
  font-size: 12px;
  padding: 0.1rem;
  margin-left: 0.5rem;
}
</style>